首页手记 jQuery DOM操作简单总结-删

jQuery DOM操作简单总结-删

标签：

JQuery

jQuery DOM操作可像SQL操作那样简单分为增、删、改、查。可能这有些牵强，但是能帮助我们理解和记忆。
jQuery DOM操作——删：

一、删除子节点

empty()，清空，仅删除指定元素中的所有子节点，不删除自身节点

$(".self").empty()

<!DOCTYPE html>
<html>
    <head>
        <title>仅删除指定元素中的所有后代节点，不删除自身节点使用.empty()</title>
        <meta charset="utf-8">
        <style>
            .parent {
                border: 1px solid #f00;
                width: 370px;
                line-height: 25px;
                padding: 5px;
            }
            .child { color: #f00; }
        </style>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button>通过.empry()方法清除后代节点</button>
        <div class="parent">
            <div class="child">测试通过.empry()方法清除子节点</div>
            <div class="child">
                <div class="grand-child">测试通过.empry()方法清除孙子（后代）节点</div>
            </div>
        </div>
        <script>
            $("button").click(function() {
                $(".parent").empty();
            });
        </script>
    </body>
</html>

二、删除自身节点

remove()，删除，remove()会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

$(".self").remove()

<!DOCTYPE html>
<html>
    <head>
        <title>将元素自身移除，同时移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据，使用remove()</title>
        <meta charset="utf-8">
        <style>
            .parent {
                border: 1px solid #f00;
                width: 370px;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .self {
                border: 1px solid #0f0;
                width: 100%;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .child { color: #f00; }
        </style>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button>通过.remove()方法删除自身节点</button>
        <button>通过.remove(argument)方法删除自身节点</button>
        <div class="parent">
            <div class="self no-argument">
                <div class="child">
                    <div class="grand-child">测试通过.remove()方法删除自身节点</div>
                </div>
            </div>
            <div class="self argument">
                <div class="child">
                    <div class="grand-child">测试通过.remove(argument)方法删除自身节点</div>
                </div>
            </div>
        </div>
        <script>
            $("button:first").click(function() {
                $(".self.no-argument").remove();
            });
            $("button:last").click(function() {
                $(".self").remove(":contains('argument')");
                /* $(".self").remove();  //将移除 class="self no-argument"和class="self argument" */
            });
        </script>
    </body>
</html>

三、保留数据和事件的删除

detach()，脱离，表示从当前页面中移除该元素，但保留这个元素的内存模型对象，即保存该元素的数据和事件。

$(".self").detach()

<!DOCTYPE html>
<html>
    <head>
        <title>从当前页面中移除该元素，但保留这个元素的内存模型对象，即保存该元素的数据和事件，使用.detach()</title>
        <meta charset="utf-8">
        <style>
            .parent {
                border: 1px solid #f00;
                width: 370px;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .self {
                border: 1px solid #0f0;
                width: 100%;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .child { color: #f00; }
        </style>
        <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button>通过.detach()方法删除自身节点</button>
        <button>通过.append()方法将删除的原本节点添加到父元素的最后</button>
        <div class="parent">
            <div class="self">测试通过.detach()方法删除自身节点</div>
        </div>
        <script>
            var self;
            $("button:first").click(function() {
                self = $(".self").detach();
            });
            $("button:last").click(function() {
                $(".parent").append($(self)); 
                /*这里self没有加上引号，删除后不存在 .self 这个元素，在$("button:first").click(function() {});中
                $(".self")被绑定到了self。不知这样理解是否正确*/
            });
        </script>
    </body>
</html>

点击第一个按钮后：

再点击第二个按钮后：